<template>
    <header class="header">
        <div class="header-left">
            <i class="cubeic-back" @click="$router.go(-1)"></i>
        </div>
        <h1>{{ title }}</h1>
        <div class="header-right">
            <slot name="headerRight"></slot>
        </div>
    </header>
</template>

<script>
    export default {
        name: 'Header',
        data () {
            return {
            }
        },
        props:{
            title: String
        },
        methods:{
        }
    }
</script>

<style lang="stylus" scoped>
    .header{
        position: fixed;
        top: 0;
        height: 44px;
        line-height: 44px;
        text-align: center;
        background-color: white;
        box-shadow: 0 1px 6px #ccc;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 5;
        font-size: 18px;
        box-sizing: border-box;
        padding: 0.1em;
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        position: fixed;
        h1,.header-left{
            font-size: 100%;
            font-weight: bold;
            padding-left: 5px;
        }
        .header-right{
            padding-right:10px
        }
    }
</style>